<template>
  <div class="more-action">
    <!-- 控制显示状态  isReport-->
    <van-cell-group v-if="!isReport" :key="'more-action'">
      <!-- <van-cell>不感兴趣</van-cell> -->
      <!-- 直接把不喜欢事件抛出去 -->
      <van-cell @click="$emit('dislike')" value="不感兴趣" />
      <van-cell is-link @click="isReport = true" value="反馈垃圾内容" />
      <van-cell value="拉黑作者" />
    </van-cell-group>
    <van-cell-group v-else :key="'more-action'">
      <van-cell icon="arrow-left" @click="isReport = false">返回</van-cell>
      <!-- 我们首先做了数组的渲染 -->
      <van-cell
        v-for="item in list"
        :key="item.value"
        @click="$emit('report', item.value)"
        :value="item.label"
      />
    </van-cell-group>
  </div>
</template>

<script>
import report from "@/constant/reports.js";
export default {
  data() {
    return {
      // 状态切换
      isReport: false,
      list: report
    };
  }
};
</script>

<style lang="less" scoped>
.more-action {
  border-radius: 4px;
}
</style>
